<template>
    <div class="table">
        <div class="btn">
            <div class="btn_item" @click="showAddDialog">
                <img class="btn_icon" src="@/assets/images/images_new/add_icon.png" alt="">
                <span>新增</span>
            </div>
            <div class="btn_item" @click="delSpace">
                <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                <span>导入</span>
            </div>
            <div class="btn_item" @click="delSpace">
                <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                <span>删除</span>
            </div>
            <div class="btn_item" @click="Enable">
                <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                <span>启用</span>
            </div>
            <div class="btn_item" @click="Disable">
                <img class="btn_icon" src="@/assets/images/images_new/del_icon.png" alt="">
                <span>禁用</span>
            </div>
        </div>
        <div class="tableBg">
            <el-table ref="tableRef" :data="tableData.list" style="width: 100%" stripe
                @selection-change="handleSelectionChange" empty-text='暂无数据' :max-height="500"
                :scrollbar-always-on="true">
                <el-table-column type="selection" width="45" />
                <!-- <el-table-column type="index" label="序号" min-width="58" /> -->
                <el-table-column property="name" label="姓名" :min-width="flexWidth('name', tableData.list, '姓名')" />
                <el-table-column property="name" label="账号" :min-width="flexWidth('name', tableData.list, '账号')" />
                <el-table-column property="name" label="部门" :min-width="flexWidth('name', tableData.list, '部门')" />
                <el-table-column property="name" label="岗位" :min-width="flexWidth('name', tableData.list, '岗位')" />
                <el-table-column property="name" label="专业" :min-width="flexWidth('name', tableData.list, '专业')" />
                <el-table-column property="name" label="工作票" :min-width="flexWidth('name', tableData.list, '工作票')" />
                <el-table-column property="name" label="状态" :min-width="flexWidth('name', tableData.list, '状态')" />
                <el-table-column property="name" label="备注" :min-width="flexWidth('name', tableData.list, '备注')" />
                <el-table-column label="操作" width="75px" class-name="fixed_column" fixed="right">
                    <template #default="scope: any">
                        <div class="btn_ative" title="修改"
                            @click="editDetails(scope.row)" :style="{ cursor:  'pointer' }">
                            <img class="operation_btn" src="@/assets/images/images_new/edit_icon.png" alt="">
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

    </div>
</template>

<script setup lang="ts">
import { isButtonDisabled, flexWidth } from '@/utils/utils'
import { useMain, store } from "@/store/index";
import { storeToRefs } from 'pinia';
const router = useRouter()
const props = defineProps({
    searchData: {
        type: Object,
        default: {}
    },
    checkItem: {
        type: Object as any,
        default: {}
    },
    table_height: {
        type: Number,
        default: 0
    },
})

interface Ilist {
    // time: string;//接收时间
    // message: string;//消息内容
    id: string;
}
// const tableData: Ilist[] = reactive([])
const tableData = reactive({
    list: [] as Array<Ilist>
})

//选中的行
const multipleSelection = reactive({
    list: [] as Array<string>
})

//多选项改变时
const handleSelectionChange = (val: Ilist[]) => {
    let list = [] as Array<string>;
    if (val) {
        val.forEach((item) => {
            list.push(item.id);
        })
    }
    multipleSelection.list = list;
}

//emit(父组件中的自定义方法)
const emit = defineEmits(['showAddDialog', 'showViewDialog', 'showEditDialog', 'getTotal', 
        'updateList', 'showEnable', 'showDisable', 'showAdd']);

//打开编辑弹窗
const editDetails = (row: any) => {
    emit('showEditDialog', row);
}

//打开新增弹窗
const showAddDialog = () => {
    // router.push('/workManagement/regularWorkAdd')
    emit('showAdd');
}

let tableRef = ref<any>(null);//获取表格组件

// 获取数据
const getList = () => {
   
}

//删除空间
const delSpace = () => {
    // console.log('multipleSelection.list',multipleSelection.list);

    if (!multipleSelection.list || multipleSelection.list.length == 0) {
        return;
    }
    //@ts-ignore 取消单行ts验证
    ElMessageBox.confirm(
        '确定删除吗?',
        '删除确认',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'none',
        }
    )
        .then(() => {
            let params = {
                ids: multipleSelection.list,
                level: props.checkItem.level + 1
            }
           
        })
        .catch(() => {

        })
}
// 启用弹窗
const Enable = () => {
    emit('showEnable');
}
// 停用弹窗
const Disable = () => {
    emit('showDisable');

}
const state = reactive({
    per: {} as any,
})


let importFile: any = ref(null);//导入文件

let fileInput = ref<any>(null);

//点击导入按钮
const importBtn = () => {
    fileInput.value?.click();
}
//导入
const fileChange = (event: any) => {

  
}

// getData()
//暴露方法,父组件才能调用
defineExpose({ getList, tableData })
</script>

<style scoped lang="scss">
.table {
    height: 100%;

    .btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 40px;
        padding-right: 25px;
        color: rgb(112, 105, 95);
        font-size: 14px;

        .btn_item {
            display: flex;
            align-items: center;
            margin-left: 20px;
            cursor: pointer;
            height: 28px;
            line-height: 28px;
            padding: 0 10px 0 8px;
            transition: 0.5s;

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

            .btn_icon {
                width: 18px;
                margin-right: 6px;
            }

            .file_input {
                display: none;
            }
        }
    }

    .tableBg {
        background-color: #fff;
        border-radius: 8px;
        height: calc(100% - 40px);
        overflow: hidden;

        .btn_ative {
            width: 35px;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
            display: inline-block;
            margin-right: 10px;
            text-align: center;
            margin-top: 7.5px;
            padding-top: 5px;

            &:last-child {
                margin-right: 0;
            }

            &:hover {
                background: rgba(0, 0, 0, 0.1);
                border-radius: 2px;
            }

            .operation_btn {
                height: 20px;

            }
        }
    }

    @media (max-width: 1500px) {
        :deep(.btn) {
            .btn_item {
                margin-left: 10px !important;
                transition: 0.5s;
            }
        }
    }

    @media (max-width: 1400px) {
        :deep(.btn) {
            .btn_item {
                margin-left: 2px !important;
                transition: 0.5s;
            }
        }
    }

}
</style>
